<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row :gutter="15">
        <el-col :span="12" :offset="6">
            <el-form ref="productForm" :model="productForm" enctype="multipart/form-data" label-width="80px">
                <h1 align="center">修改商品</h1>
                <el-form-item label="商品名称">
                    <el-input v-model="productForm.name" placeholder="请填入商品名称"></el-input>
                </el-form-item>

                <el-form-item label="商品类型">
                    <el-select v-model="productForm.typeid" placeholder="请选择商品类型">
                        <el-option
                                v-for="item in pType"
                                :key="item.id"
                                :label="item.typename"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细信息">
                    <el-input type="textarea" v-model="productForm.detail" placeholder="请填入详细信息"></el-input>
                </el-form-item>

                <el-form-item label="上传图片">
                    <el-upload
                            class="upload-demo"
                            :limit="3"
                            :multiple="true"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :on-change="onchange"
                            :auto-upload="false"
                            accept=".jpg,.png,.jpeg"
                            name="file"
                            list-type="picture">
                        <el-button size="small"  type="info">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2000kb，文件数量最多三个</div>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button @click="update" type="primary">修改</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            productForm:{
                id:'',
                name:'',
                typeid:'',
                detail:'',
                createtime:'',
                imageUrl:[],
                document:'',

            },
            pType:[],
            fileList:[],
            //
        },
        methods: {
            initType(){
                $.get("/pType/selectAllType",function (data){
                    app.pType=data;
                })
            },
            update(){
                this.productForm.imageUrl=this.fileList;
                let format = new FormData();
                format.append("productId",this.productForm.id)
                format.append("name",this.productForm.name)
                format.append("typeId",this.productForm.typeid)
                format.append("detail",this.productForm.detail)
                format.append("createtime",this.productForm.createtime)
                this.productForm.imageUrl.forEach(file => {
                    format.append("imageUrl",file.raw)
                });
                this.fileList.forEach(file => {
                    format.append("document",file.name)
                })
                $.ajax({
                    url:'/product/updateInfo',
                    type:'post',
                    data:format,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success:function (data){
                        if(data === "商品修改成功！！！"){
                            app.$alert(data);
                            window.parent.location.href="/"
                            return;
                        }
                        app.$alert(data);
                    }
                })
            }
            ,
            handlePreview(){

            },
            handleRemove(file, fileList){
                const newFileList =fileList.filter(item => item !== file);
                this.fileList = newFileList;
                console.log(fileList)
            },
            onchange(file, fileList){
                this.fileList.push(file)
            }
            //
        },
        created(){
            this.productForm = JSON.parse(localStorage.getItem("product"));
            this.fileList = JSON.parse(localStorage.getItem("document"));
            this.initType();
        }
    });
</script>
</body>
</html>
